{% extends 'demo/base.html' %}
{% load common_extras %}
{% load static %}
{% block title %}
    创作中心
{% endblock %}
{% block link %}
    <link rel="stylesheet" href="{% static 'css/demo/nav.css' %}">
{% endblock %}
{% block header %}
    {% include 'demo/header.html' %}
{% endblock %}
{% block main %}
    {% if articles %}
        <ul class="nav">

            {#    循环生成多个li标签 #}
            {#for循环获取到每篇文章数据 pages保存了当前页面的文章数据#}
            {% for article in pages %}
                <li>
                    {#    articles.0第一篇文章数据#}
                    {% comment %}如果路由定义了转换器或者其他的参数，那么就不能使用url模版标签的命名路由跳转到其他的页面{% endcomment %}
                    <a href="/demo/article/{{ article.id }}">
                        <div class="left">
                            {#                    counter 默认从1开始 for循环迭代的次数 反向 revcounter#}
                            <h4>{{ forloop.counter }}、{{ article.title }}</h4>
                            <p>{{ article.desc }}</p>
                            {#                            <p class="time-info">发布时间:{{ article.create_time|date:'Y年m月d日H:i:s' }}</p>#}
                            <p class="time-info">发布时间:{{ article.create_time|time_since }}</p>
                        </div>
                        <div class="right">
                            {#                            {{ article.cover }}#}
                            <img src="/static/media/{{ article.cover }}/" alt="">
                        </div>
                    </a>
                    <div class="func">
                        <a href="/demo/article/update/{{ article.id }}">修改</a>
                        <a href="/demo/article/delete/{{ article.id }}">删除</a>
                    </div>
                </li>
            {% endfor %}
            <div class="bottom-info">
                {#        判断当前页面是否有上一页#}
                {% if pages.has_previous %}
                    <a href="{% url 'ArticleUser' %}?page={{ pages.previous_page_number }}">上一页</a>
                {% endif %}
                {#        通过循环显示多个页面的页码#}
                {% for page in pages.paginator.page_range %}
                    {#                如果点击的已经是显示的当前页面#}
                    {% if page == pages.number %}
                        <a href="{% url 'ArticleUser' %}?page={{ page }}"
                           style="border-bottom: 2px solid cornflowerblue">{{ page }}</a>
                    {% else %}
                        <a href="{% url 'ArticleUser' %}?page={{ page }}">{{ page }}</a>
                    {% endif %}


                {% endfor %}




                {#            判断当前页面是否有下一页#}
                {% if pages.has_next %}
                    <a href="{% url 'ArticleUser' %}?page={{ pages.next_page_number }}">下一页</a>
                {% endif %}
                {% if not pages.has_next %}
                    <p>文章已经是最后一篇了！！！</p>
                {% endif %}
            </div>


        </ul>


    {% endif %}

{% endblock %}